<template>
	<view class="me">
		<view class="meDetail">
			<view class="meInfo" @tap="toPerson">
				<view class="avatar">
					<u-avatar size="40" :src="imageHandle(userInfo.cover)"></u-avatar>
				</view>
				<view class="name">
					<u--text type="info" :text="userInfo.name" :lines="1" size="20"
						color="white"></u--text>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="orderChild" v-for="(item,index) in orderChild" :key="index" @tap="orderNavHandle(index)">
				<view class="img">
					<u-icon :name="item.name" size="40" :color="index===clickedIndex?'#d70000':'#767676'" ></u-icon>
				</view>
				<view class="text">
					{{item.title}}
				</view>
				<!-- <u-badge :value="100" :offset="[0,-5]" absolute="true" style="font-size: 5px;" :max="99"></u-badge> -->
			</view>
			
		</view>
		<view class="orderDetail" :style="{height:numHandle}">
			<!-- <u-scroll-list> -->
			<u-list  height="100%" width="100%">
				<u-list-item v-for="(item, index) in orderList" :key="item.id">
					<view class="oneOrder" @tap="orderClick(item)">
						<view class="right_price">
							<view class="amount">￥{{item.amount}}</view>
							<!-- <view class="count">共件</view> -->
							
						</view>
						<view class="orderTop_box">
							<view class="order_id">订单号:{{item.id}}</view>
							<view class="orderStatus" v-if="item.status==0" style="color: red;">待付款</view>
							<view class="orderStatus" v-if="item.status==1" style="color: blue;">待出餐</view>
							<view class="orderStatus" v-if="item.status==2">已完成</view>
						</view>

						<view class="orderImgs">
							<u-scroll-list :indicator="false">
								<view class="img" v-for="good in item.dcGoodsList" :key="good.id">
									<image :src="imageHandle(good.imagine)"></image>
									<!-- <view class="text">{{good.name}}</view> -->
								</view>
							</u-scroll-list>
						</view>


					</view>
				</u-list-item>
			</u-list>
			<!-- </u-scroll-list> -->
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import {
		getOrder,getUserInfo
	} from '@/config/api.js'
	import config from '@/config.js';
	export default {
		data() {
			return {
				type: "warning",
				value: 100,
				windowsHeight: 0,
				windowBottom: 0,
				orderList: [],
				clickedIndex:0,
				orderChild:[
					{title:'全部订单',name:'file-text'},
					{title:'待付款',name:'calendar'},
					{title:'待出餐',name:'bookmark'},
					{title:'已完成',name:'checkmark-circle'}
				]
			}
		},
		onShow(){
			getOrder(this.clickedIndex-1).then((res)=>{
				this.orderList=res.data
			})
			getUserInfo().then((res)=>{
				this.$store.state.userInfo=res.data.userInfo;
			});
		
		},
		onLoad() {
			getOrder(-1).then((res)=>{
				this.orderList=res.data
			})
			
			uni.getSystemInfo({
				success: (res) => {
					this.windowsHeight = res.windowHeight
					this.windowBottom = res.windowBottom
					
				}
			})
		},
		computed: {
			...mapState(["userInfo"]),
			numHandle() {
				if (160 * this.orderList.length <= this.windowsHeight - 180) {
					return (160 * this.orderList.length + 10) + "px"
				}
				return this.windowsHeight - 180 + 'px';
			},
			
			
		},
		methods:{
			orderNavHandle(index){
				this.clickedIndex=index;
				getOrder(index-1).then((res)=>{
					this.orderList=res.data
				})
			},
			imageHandle(imgSrc) {
				return config.baseURL + imgSrc + "";
			},
			orderClick(item){
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?orderId='+encodeURIComponent(JSON.stringify(item.id))
				});
			},
			toPerson(){
				uni.navigateTo({
					url: '/pages/me/person/person'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;

	}

	.me {
		background-color: #f4f4f4;

		.meDetail {
			width: 100%;
			height: 120px;
			background-color: black;
			display: flex;
			justify-content: space-around;

			.meInfo {
				width: 90%;
				height: 45px;

				position: absolute;
				top: 5%;
				display: flex;

				.avatar {
					width: 20%;
					height: 100%;

					display: flex;
					align-items: center;
				}

				.name {
					width: 80%;
					height: 100%;

					display: flex;
					align-items: center;
				}
			}
		}

		.order {
			width: 95%;
			height: 70px;
			background-color: white;
			margin: 0 auto;
			border-radius: 8px;
			margin-top: -20px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.orderChild {
				width: 60px;
				height: 60px;

				position: relative;

				.img {
					width: 40px;
					height: 40px;
					margin: 0 auto;
					

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					width: 100%;
					height: 20px;
					font-size: 12px;
					text-align: center;

					line-height: 20px;
				}
			}
		}

		.orderDetail {
			width: 95%;
			margin: 0 auto;
			margin-top: 5px;
			border-radius: 8px;
			background-color: white;

			// .orderDetail:last-child {
			// 	 padding-bottom: 5px;
			// }

			.oneOrder {
				width: 97%;
				margin: 0 auto;
				height: 150px;
				background-color: white;
				 // margin-bottom: 10px;
				border-radius: 8px;
				overflow: hidden;
				position: relative;
				border-bottom:solid #f4f4f4 1px ;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
				.right_price {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 80px;
					height: 80%;
					background-color: white;
					z-index: 999;
					opacity: 0.85;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					.amount{
						font-size: 13px;
					}
					.count{
						font-size: 13px;
					}
				}

				.orderTop_box {
					width: 100%;
					height: 25%;
					// background-color: aqua;
					display: flex;

					.order_id {
						width: 50%;
						height: 100%;
						// background-color: antiquewhite;
						padding-left: 10px;
						line-height: 37.5px;
						// font-family: "宋体";
						font-size: 11px;
					}

					.orderStatus {
						width: 50%;
						height: 100%;
						// background-color: aquamarine;
						padding-right: 10px;
						text-align: right;
						line-height: 37.5px;
						font-family: "宋体";
						font-size: 11px;
					}
				}

				.orderImgs {
					width: 95%;
					height: 75%;
					margin: 0 auto;
					//background-color: #ffaa00;
					border-bottom: 1px solid black;
					.img:first-child {
						margin-left: 0px;
					}

					.img {
						width: 100px;
						//background-color: red;
						margin-left: 4px;
						border-radius: 8px;
						margin-bottom: 2px;
						
						image {
							width: 80px;
							height: 80px;
							border-radius: 8px;

						}

						.text {
							width: 100%;
							height: 25px;
							font-family: "宋体";
							font-size: 11px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 2px;
							// line-height: 25px;
						}
					}

				}
			}
		}
	}
</style>